<template>

<a-tabs v-model:activeKey="activeKey" :tab-position="'right'">
    <a-tab-pane key="1" tab="要点及目标">




      <div class="container">
        <!-- <div class="item-01"></div> -->


        <div class="item performance-domain">
          八大绩效域<br/>
          <PmpItemName :id="'subPerformanceDomain'" >
            <span>八大绩效域</span>
          </PmpItemName>

          <br/>
          <CreateSub size="small"></CreateSub>
        </div>

        
        <div class="item dPlan">
          <PmpItemName :id="'dPlan'" >
            <span>规划绩效域</span>
          </PmpItemName>
        </div>
        <div class="item dUncertainty">
          <PmpItemName :id="'dUncertainty'" >
            <span>不确定性绩效域</span>
          </PmpItemName>
        </div>

        <div class="item dWork">
          <PmpItemName :id="'dWork'" >
            <span>工作绩效域</span>
          </PmpItemName>
        </div>
        
        <div class="item dStakeholder">
          <PmpItemName :id="'dStakeholder'" >
            <span>干系人绩效域</span>
          </PmpItemName>
        </div>



        <div class="item dMeasure">
          <PmpItemName :id="'dMeasure'" >
            <span>度量绩效域</span>
          </PmpItemName>
        </div>
        <div class="item dTeam">
          <PmpItemName :id="'dTeam'" >
            <span>团队绩效域</span>
          </PmpItemName>
        </div>

        <!-- <div class="item-03"></div> -->
        <div class="item dDevelopAndLifeCycle">
          <PmpItemName :id="'dDevelopAndLifeCycle'" >
            <span>开发方法与生命周期绩效域</span>
          </PmpItemName>

        </div>
        <div class="item dDeliver">
          <PmpItemName :id="'dDeliver'" >
            <span>交付绩效域</span>
          </PmpItemName>
        </div>
        

      </div>


      <PmpItemName :id="'subPerformanceDomain'" >
          <span>八大绩效域</span>
      </PmpItemName>

      

    </a-tab-pane>
    <a-tab-pane key="2" tab="记忆图" >
      <img :src="performDomain" width="100%"/></a-tab-pane>
    <a-tab-pane key="3" tab="要点及目标">
      
<dl v-for="item in pmpHooks.performanceDomainList.value" :key="item.id">
        <dt><b>{{item.nameCn}}</b></dt>
        <dd>要点：{{item.point}}</dd>
        <dd>目标：
          <ul>
            <li v-for="t,idx in item.targetList" :key="idx">
              {{t}}
            </li>
          </ul>
        </dd>
      </dl>
    </a-tab-pane>
  </a-tabs>



  八大绩效域：团干不测划开工交(团干部策划开公交)
  <!-- {{pmpHooks.performanceDomainList.value}} -->

  
</template>

<script setup>

import { ref } from 'vue'
import pmpHooks from '@/hooks/PmpHooks.js'
import performDomain from '@/assets/images/performDomain.png'
import CreateSub from '@/components/CreateSub.vue'

const activeKey = ref('1');
</script>

<style scoped>
.container{
  display: grid;
  grid-template-columns: repeat(4, 200px);
  grid-template-rows: repeat(4, 150px);
  grid-gap:8px;
  grid-template-areas: 'a b c d'
                       'e f f g'
                       'h f f i'
                       'j k l m';
}

.item{
  border: 1px solid #36393d;
  border-radius: 5px;
  padding: 4px;
  background: #cce5ff;
  text-align:center;
}

.performance-domain{
  grid-area: f;
  font-weight:bold;
  background: #bac8d3;
  border: 1px solid #10739e;
  text-align:center;
  font-size:48px;
}

.item-01{
  grid-area: a;
}
.item-02{
  grid-area: d;
}
.item-03{
  grid-area: g;
}
.item-04{
  grid-area: m;
}

.dPlan{
  grid-area: b;
}

.dUncertainty{
    grid-column-start: c;
    grid-column-end: d;
}



.dWork{
  
  grid-row-start: a;
  grid-row-end: e;
}

.dStakeholder{
  grid-area: g;
}

.dMeasure{
  grid-area: h;
}

.dTeam{
  grid-row-start: i;
  grid-row-end: m;
}

.dDevelopAndLifeCycle{
  grid-column-start: j;
    grid-column-end: k;
}

.dDeliver{
  grid-area: l;
}

</style>